<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 60px;
        }
        .box4{
            border: 10px red solid;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left; 
            overflow: hidden;
            
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
            clear: both; 
        
        /* 
            定位：更加高级的布局手段
                - 将元素摆放在页面的任意位置
                - 使用position 属性设置定位
                    可选值：
                        static 默认值 静止
                        relative 相对定位
                        absolute 绝对定位
                        fixed 固定定位
                        sticky 粘滞定位

                    相对定位：
                        不设置偏移  不发生变化
                        2.原始位置 在文档流中的位置
                        3.相对定位会提升元素的 - 层级
                        4.相对定位不会使元素脱离文档流
                        4.不会改变性质 块还是块  行内还是行内
                    
                    偏移量
                        top
                            - 定位元素和定位位置的上边距
                        bottom
                        left
                        right
      
        */
         position: relative;
            left: 0;
            top: 0; 
        /* overflow: hidden; */
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* position: relative;
            left: 100px;
            top: -100px; */
            float: left;

        }
        .span1{
            display: block;
            /* margin-top: 50px; */
            position: relative;
            top: 50px;
        }

    </style>
</head>
<body>
    <div class="box4 clearfix">
        <div class="box1 " >1
            <!-- <span class="span1">123456</span>
            <span class="span2">saassa</span> -->
        </div>
        <div class="box2 ">2</div>
        <div class="box3">3
        </div>
    </div>

    
</body>
</html>